import Vue from "vue";
import Vuex from "vuex";
import * as commentApi from "@/api";
Vue.use(Vuex); //把vuex注入到所有的子组件

export default new Vuex.Store({
  strict: true, //just警告一下
  //vuex五大核心
  state: {
    //把组件需要共享的数据都可以放到state中，作为单一的状态数，作为所有组件的唯一数据来源
    commentList: [],
  }, //状态
  // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
  //由一个类型type对应一个处理函数handle
  //一般定义mutation类型的时候都会大写
  //mutation会接收state作为参数,还可以接收payload作为荷载内容
  //mutation其实不是唯一方式,有很多种方式都可以修改state,比如getters中 比如直接修改 比如action中都可以直接修改,但是我们不要这样做,因为这些修改都是不符合vuex设计原则的
  //一个约定就是,修改state,必须通过mutations来进行更改
  //mutation中的逻辑都是同步的,如果在mutations中编写异步逻辑,视图是可以响应的,但是调试工具无法检测状态的变化
  mutations: {
    //设置评论列表数据
    SET_COMMENT_LIST(state, payload) {
      state.commentList = payload;
    },
  }, //修改状态的方法

  // 和mutation几乎一样
  // 一个type对应一个处理函数handle
  // 接受的参数1.context 2.payload
  // context上下文 包含了state getters commit..store.commit...
  // action不能用于直接修改状态，二十用于发送异步请求，提交mutation
  actions: {
    //获取评论列表
    GET_COMMENT_LIST({ commit }) {
      commentApi.getComments().then((res) => {
        // console.log(res);
        //提交Mutation 变更commentList
        commit("SET_COMMENT_LIST", res.data.data);
      });
    },
  },
  getters: {}, //相当于是vuex中的计算属性
  modules: {}, //模块化
});
